<template>
  <div class="main-content">
    <ul class="albumInfo">
      <li>
        <span>
          <button :style="{'width':'50px','height':'50px','transform':`scale(${num})`}" class="play-btn" @click="toggle">
             <svg-icon icon-class="play" style="position: absolute;margin-left: 4px;cursor: default;"></svg-icon>
          </button>
          <img :src="playLists.coverImgUrl" alt="">
        </span>
      </li>
      <li class="albumInfo_content">
        <p>{{playLists.name}}</p>
        <p>Playlist by{{playLists.creator?playLists.creator.nickname:''}}</p>
        <p>最后更新于{{playLists.updateTime|formateTime}}·20首歌</p>
        <p>{{playLists.description}}</p>
        <div class="albumInfo_content_bottom">
          <ul>
            <li>
              <svg-icon icon-class="play" class="icon"></svg-icon>
              <p>播放</p>
            </li>
            <li>
              <svg-icon icon-class="heart" style="width:16px;height:16px;margin: 13px;" class="icon"></svg-icon>
            </li>
            <li>
              <svg-icon icon-class="more"  style="width:16px;height:16px;margin: 14px;" class="icon"></svg-icon>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="album-List">
      <SongItem v-for="(item,index) in playLists.tracks" @contextmenu.prevent="showTextMenu($event,index)" :item="item" :key="index" :index="index"></SongItem>
      <ul class="rightMenu" v-show="flag" :style="`top:${topVal}px;left:${leftVal}px;`">
        <li>
          <div>
            <img :src="pictureUrl" alt="">
            <span>
              <p>{{musicName}}</p>
              <p>{{author}}</p>
            </span>
          </div>
        </li>
        <li class="menuList">
          <p>播放</p>
          <p>下一首播放</p>
        </li>
        <li class="menuList">
          <p>添加到我喜欢的音乐</p>
          <p>添加到歌单</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import SongItem from '../../components/SongsItem/SongItem';

export default {
  name: 'playList',
  data() {
    return {
      num: 1,
      flag: false,
      playLists: [],
      topVal: 0,
      leftVal: 0,
      pictureUrl: '',
      musicName: '',
      author: '',
    };
  },
  components: {
    SongItem,
  },
  filters: {
    // 时间戳
    formateTime(time) {
      const date = new Date(time);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    },
  },
  created() {
    if (this.$route.params.id) {
      this.$playlistDetail({
        id: this.$route.params.id,
      }).then((res) => {
        this.playLists = res.data.playlist;
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    }
  },
  methods: {
    toggle() {
      // eslint-disable-next-line no-console
      console.log(1);
    },
    showTextMenu(e, index) {
      // 右键菜单事件
      // 处理兼容性问题
      const oEvent = e || event;
      // 设置自定义菜单为可见
      this.flag = true;
      // // 获取鼠标的坐标
      const moveX = oEvent.clientX;
      const moveY = (index * 62) + 30;
      // const moveY = e.clientY;
      // // 设置盒子的top和left值
      this.leftVal = moveX - 130;
      this.topVal = moveY;
      this.pictureUrl = this.playLists.tracks[index].al.picUrl;
      this.musicName = this.playLists.tracks[index].name;
      this.author = this.playLists.tracks[index].ar[0].name;
    },
    closeTextMenu() {
      this.flag = false;
    },
  },
  watch: {
    flag(flag) {
      if (flag) {
        document.body.addEventListener('click', this.closeTextMenu);
      } else {
        document.body.removeEventListener('click', this.closeTextMenu);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.album-List{
   position: relative;
}
.albumInfo{
  margin-bottom: 72px;
  width:1146px;
  height:290px;
  display: flex;
  justify-content: space-between;
  li{
    &:nth-of-type(1){
      span{
        position: relative;
        display: inline-block;
        width:289px;
        height:287px;
        overflow: hidden;
        border-radius:12px;
        box-shadow:0px 4px 16px -3px grey;
        img{
          width:100%;
          height:100%;
        }
        .icon{
          transition: all 1s;
          display: inline-block;
          background: rgba(153,136,116,.8);
          box-shadow: 3px 3px 6px 3px rgba(0,0,0,.3);
          border:1px solid rgba(255,255,255,.2);
          width:52px;
          height:52px;
          opacity:0;
          border-radius:50%;
          text-align: center;
          line-height:52px;
          position: absolute;
          left: 40%;
          top: 40%;
          &:hover{
            transform: scale(1.5);
          }
        }
        &:hover .play-btn{
          visibility: inherit;
        }
      }
    }
  }
}
.albumInfo_content{
  margin-left:56px;
  >p:nth-of-type(1){
    font-size:37px;
    font-weight:bold;
  }
  >p:nth-of-type(2){
    margin-top:30px;
    font-size:20px;
  }
  >p:nth-of-type(3){
    font-size:13px;
    color:#525252;
  }
  >p:nth-of-type(4){
    margin-top:26px;
    font-size:13px;
    color:#525252;
  }
}
.albumInfo_content_bottom{
  margin-top:31px;
  ul{
    width:207px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    li{
      &:nth-of-type(1){
        display: flex;
        line-height:44px;
        justify-content:center;
        width:93px;
        height:44px;
        border-radius:8px;
        font-size:18px;
        background-color:#ebeffc;
        color:#3a62e2;
        .icon{
          margin-right:11px;
          margin-top:15px;
        }
        p{
          font-weight:bold;
        }
      }
      &:nth-of-type(2), &:nth-of-type(3){
        width:44px;
        height:42px;
        background-color: #f7f7f9;
        border-radius:8px;
        .icon{
          display: inline-block;
          width:inherit;
          height:inherit;
          text-align: center;
          line-height:42px;
        }
      }
    }
  }
}
.albumInfo_content_bottom ul li:hover{
  transform: scale(1.05);
}
.play-btn{
    visibility:hidden;
    position: absolute;
    top: 42%;
    left: 41%;
    color: #fff;
    background: hsla(0,0%,100%,.14);
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 50%;
    cursor: default;
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-btn:hover {
  background:rgba(225,225,225,.4);
}
.rightMenu{
  position: absolute;
  padding-left:17px;
  padding-right:16px;
  top:0px;
  left: 0px;
  height:251px;
  width:169px;
  border-radius:9px;
  box-shadow:0px 0px 8px -3px grey;
  background-color: white;
  li{
    img{
      width:39px;
      height:39px;
      border-radius:6px;
    }
    &:nth-of-type(1){
      div{
        display: flex;
        align-items: center;
        height:68px;
        border-bottom:2px solid #e8e8e8;
      span{
        margin-left:9px;
        >p:nth-of-type(1){
          font-size:15px;
          font-weight:bold;
          width: 86px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        >p:nth-of-type(2){
          font-size:12px;
          color:#525252;
        }
      }
      }
    }
    &:nth-of-type(2){
      padding:5px 0px;
      border-bottom:2px solid #e8e8e8;
      p{
        height:40px;
        line-height:40px;
        font-size:13px;
        font-weight: bold;
        width:153px;
        border-radius:7px;
        padding-left:15px;
        transform:translateX(-10px);
      }
    }
    &:nth-of-type(3){
      padding:5px 0px;
      p{
        padding-left:6px;
        height:40px;
        width:153px;
        line-height:40px;
        font-weight: bold;
        font-size: 13px;
        border-radius:7px;
        padding-left:15px;
        transform:translateX(-10px);
      }
    }
  }
}
.menuList p:hover{
      background-color:#eef1fe;
      color:#3a62e2;
      cursor: pointer;
}
p{
  margin-bottom: 0px;
}
</style>
